<template>
    <div class="px">
        <el-card>
            <div slot="header" class="clearfix">
                <span style="color: #066cac">
                    <i class="el-icon-document"></i>
                    我的考试 My Examination
                </span>
                <el-button type="primary"
                           size="mini"
                           icon="el-icon-arrow-left"
                           @click="$router.go(-1)"
                           style="float: right;">返回
                </el-button>
            </div>
            <div>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" v-for="item in tableData" :key="item.id">
                        <myTab :tag="tag(item.examState)">
                            <template slot="head">
                                <div class="tab-p">
                                    <h3>{{item.examName}}</h3>
                                    <p>考试编号：{{item.id}}</p>
                                    <p>参考人数：{{item.examJoinNum}}</p>
                                    <p>开始时间：{{ item.examBeginTime }}</p>
                                    <p>结束时间：{{ item.examOverTime }}</p>
                                    <p>考试时长：{{(new Date(item.examOverTime).getTime()-new
                                        Date(item.examBeginTime).getTime())/60000+'分钟' }}
                                    </p>
                                </div>
                            </template>
                            <template slot="foot">
                                <div style="text-align: right;line-height: 70px;padding-right: 15px;">
                                    <el-button
                                            :disabled="item.examState!==3"
                                            v-if="item.examState<4"
                                            size="small"
                                            type="danger"
                                            icon="el-icon-video-play"
                                            @click="doExam(item.id)">开始考试
                                    </el-button>
                                    <el-button
                                            :disabled="item.examState!==5"
                                            v-if="item.examState>=4"
                                            size="small"
                                            type="success"
                                            icon="el-icon-search"
                                            @click="scoreQuery(item.id,item.examName)">成绩查询
                                    </el-button>
                                    <el-button
                                            size="small"
                                            type="primary"
                                            icon="el-icon-tickets"
                                            @click="admissionTicket(item.id)">准考证
                                    </el-button>
                                </div>
                            </template>
                        </myTab>
                    </el-col>
                    <el-col :span="24" v-if="tableData.length<=0">
                        <el-empty description="无数据"></el-empty>
                    </el-col>
                    <el-col :span="24">
                        <div style="margin: 10px;text-align: center;">
                            <el-pagination
                                    :pager-count="11"
                                    :page-sizes="[9,18,27,36, 45, 54, 63]"
                                    :page-size="pageSize"
                                    :current-page="currentPage"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    layout="total, prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>


        <el-dialog
                :close-on-click-modal="false"
                title="成绩查询"
                :visible.sync="scoreQueryDialogVisible"
                width="30%">
            <div style="text-align: center;color: #ffc200;">
                <div style="border: 5px solid #ffc200;width: 80px;height: 80px;margin: 0 auto;border-radius: 50%;
line-height: 100px;">
                    <i style="font-size: 56px;position: relative;top: 5px" class="el-icon-trophy"></i>
                </div>
                <div>
                    <p style="font-size: 22px;margin: 15px auto 0;color: rgb(0 160 69);">{{myScore.title}}</p>
                    <h2 style="margin: 0">你的成绩是
                        <span style="font-size: 48px;color: #ff5a00;">{{myScore.score||0}}</span>
                        分
                    </h2>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button size="mini"
               icon="el-icon-arrow-left"
               @click="scoreQueryDialogVisible = false">返回</el-button>
    <el-button type="primary" size="mini"
               icon="el-icon-document"
               @click="showMyTestPaper">查看试卷</el-button>
  </span>
        </el-dialog>


    </div>
</template>

<script>
    import {myExam, selfScoreQuery} from "../../../api/examination";
    import {queryByTypeCode} from "../../../api/dictionary";
    import myTab from "../../../components/myTab"

    export default {
        data() {
            return {
                total: 0,//总页数
                currentPage: 1,//当前页面
                pageSize: 9,//每页大小
                tableData: [],
                examSubject: [],
                examState: [],
                timer: null,
                scoreQueryDialogVisible: false,
                myScore: {
                    id: 0,
                    title: "",
                    score: 0,
                },

            }
        },
        components: {myTab},
        mounted() {
            this.initDict()
            this.getList()
            this.timer = setInterval(this.getList, 1000);
        },
        beforeDestroy() {
            clearInterval(this.timer)
        },
        methods: {
            refresh() {
                this.getList()
            },
            async getList() {
                let resp = await myExam(this.currentPage, this.pageSize);
                this.total = resp.data.total;
                this.tableData = resp.data.list;
            },
            async initDict() {
                let resp = await queryByTypeCode("exam_subject")
                this.examSubject = resp.data
                resp = await queryByTypeCode("exam_state")
                this.examState = resp.data
            },
            //页数改变
            handleSizeChange(val) {
                this.pageSize = val
                this.refresh();
            },
            //翻页
            handleCurrentChange(val) {
                this.currentPage = val
                this.refresh();
            },
            // 开始考试
            doExam(id) {
                this.$router.push({
                    name: "AnswerSheet",
                    params: {
                        id: id
                    }
                })
            },
            async scoreQuery(examId, examName) {
                this.myScore.title = examName
                let resp = await selfScoreQuery(examId)
                if (resp.code === 200) {
                    this.myScore.id = examId
                    this.myScore.score = resp.data
                    this.scoreQueryDialogVisible = true;
                }
            },
            admissionTicket(id) {
                this.$router.push({
                    path: "/ei/admissionTicket",
                    query: {
                        id: id
                    }
                })
            },
            //查看试卷
            showMyTestPaper() {
                this.scoreQueryDialogVisible = false
                this.$router.push({
                    path: "/ei/myTestPaper",
                    query: {
                        id: this.myScore.id
                    }
                })
            },
            tag(state) {
                let obj = {
                    tag: null,
                    bg: null,
                }
                let tag = null;
                if (state === 2) {
                    obj.tag = "未开考"
                }
                if (state === 3) {
                    obj.tag = "考试中"
                    obj.bg = "#f56c6c";
                }
                if (state === 4) {
                    obj.tag = "已结束"
                    obj.bg = "#009200";
                }
                if (state === 5) {
                    obj.tag = "查成绩"
                    obj.bg = "#e6a23c";
                }
                return obj;
            }
        }
    }
</script>

<style scoped lang="scss">
</style>